<template>
	<view class="modal">
		<view class="modal_bg">
			<image class="logo" src="/static/logo.png"></image>
<!-- 			<view class="modal_title">自我训练记录上传</view> -->
			<view class="modal_content">
				<textarea name="" id="" cols="30" rows="10" placeholder="请留言"	 v-model="message"></textarea>
			</view>
			<view class="modal_btn">
				<button @click="cancel" class="cancelBtn">取消</button>
				<button @click="save" class="okBtn">确定</button>
			</view>

		</view>

	</view>
</template>

<script>
import { getUserInfo, levaveMessage } from '../api'
import { config } from '../utils/utils'
	
	export default {
		props: {
			aid: String
		},
		name: "messageModal",
		data() {
			return {
				message: '',
			}
		},
		methods: {
			cancel() {
				this.$emit('close',false)
			},
			save() {
				
				// * openId 用户openId
				// * aid 文章id
				// * content 留言内容
				let userInfo = uni.getStorageSync(config.userInfo);
				let openId = userInfo.openid;
				let param = {
					openId: openId,
					aid: this.aid,
					content: this.message
				}
				levaveMessage(param).then(res=>{
					this.message = '';
					uni.showToast({
						title: '留言成功'
					});
					this.$emit('close',true)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.modal {
		.modal_bg {
			// background: white;
			border-radius: 20rpx;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			.close {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
			.modal_title {
				width: 100%;
				border-bottom: 2rpx solid #eff1f4;
				font-size: 36rpx;
			}

			.modal_content {
				display: flex;
				flex-direction: column;
				align-items: center;
				border-bottom: 2rpx solid #eff1f4;
				padding: 0 40rpx;
				
				.upload {
					width: 160rpx;
					height: 160rpx;
					margin-top: 70rpx;
				}
				.alert {
					margin-top: 30rpx;
					width: 54rpx;
					height: 54rpx;
				}
				.alert-text {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
					
				}
				textarea {
					margin-top: 40rpx;
					border:  1px solid #000000;
					height: 240rpx;
					width: 590rpx;
					border-radius: 10rpx;
					text-align: left;
					padding: 30rpx;
					font-size: 24rpx;
				}
				
			}

			.modal_btn {
				margin-top: 130rpx;
				height: 80rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.cancelBtn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: #f8f8f8;
					color: rgb(6, 193, 96);
					border-radius: 10rpx;
					width: 240rpx;
					height: 80rpx;
					font-size: 34rpx;
					margin: 0;
					padding: 0;
				}
				.okBtn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgb(6, 193, 96);
					color: #ffffff;
					border-radius: 10rpx;
					width: 240rpx;
					height: 80rpx;
					font-size: 34rpx;
					margin: 0;
					padding: 0;
					margin-left: 30rpx;
				
				}
		
			}
		}
	}
</style>

